<template>
  <!-- vue3中不再需要根标签了 -->
  <h1>App</h1>
  <p>{{ num }}</p>
  <button @click="num++">添加</button>

  <ul>
    <li v-for="(value, key) in person" :key="key">{{ key }} - {{ value }}</li>
  </ul>
  <button @click="add">添加属性</button>
</template>

<script lang="ts">
/*
  data
    vue2中data有两种写法：函数和对象
     在组件中只能用函数形式。

      data中数据是响应式的。
        新增属性不是响应式。
        解决：this.$set(person, 'age', 18) / Vue.set()

      响应式原理：Object.defineProperty()

    vue3中data只能写函数形式。

      data中数据是响应式的, 并且新增属性也是响应式。

      响应式原理：Proxy
*/
export default {
  name: 'App',
  data() {
    return {
      num: 0,
      person: {
        name: '陈末',
      },
    };
  },
  methods: {
    add() {
      //ts报错不影响程序的运行
      this.person.age = 18;
    },
  },
};
</script>

<style scoped></style>
